import { Button, Form, FormProps, Modal, Select } from "antd";
import { useEffect, useState, forwardRef, useImperativeHandle } from "react";
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};
function SongModal(props: any, ref: any) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const form = Form.useForm();
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
  };
  const options = [
    {
      label: "消愁",
      value: 1001,
      info: { id: 1001, songName: "消愁", artistName: "毛不易" },
    },
    {
      label: "无名的人",
      value: 1002,
      info: { id: 1002, songName: "无名的人", artistName: "毛不易" },
    },
  ];

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const getInfo = () => {
    console.log("getInfo");
    // const key = form.getFieldValue(remember);
    const selectInfo = null;
    // options.forEach((item) => {
    //   if (item.key === key) selectInfo = item.info;
    // });
    return selectInfo;
  };
  useImperativeHandle(ref, () => {
    return { showModal, getInfo, handleCancel };
  });
  return (
    <div style={{ display: "flex", gap: "10px" }}>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>

      <Modal
        title="Basic Modal"
        closable={{ "aria-label": "Custom Close Button" }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            label={null}
          >
            <Select options={options}></Select>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default forwardRef(SongModal);
